<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.springframework.org/schema/mvc">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>Web贪吃蛇</title>
</head>
<body style="text-align: center">
<canvas id="gameMap" width="500" height="500" tabindex="0" style="border:1px solid #000000;">不支持canvas</canvas>
<table align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td></td>
        <td>
            <input type="button" value="↑" onclick="doDirection('38')" style="width: 50px; height: 50px; border: none">
        </td>
        <td></td>
    </tr>
    <tr>
        <td>
            <input type="button" value="←" onclick="doDirection('37')" style="width: 50px; height: 50px; border: none">
        </td>
        <td></td>
        <td>
            <input type="button" value="→" onclick="doDirection('39')" style="width: 50px; height: 50px; border: none">
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="button" value="↓" onclick="doDirection('40')" style="width: 50px; height: 50px; border: none">
        </td>
        <td></td>
    </tr>
</table>
</body>
<script type="text/javascript" th:inline="javascript">
    var gameMap = document.getElementById("gameMap");

    // 适配手机
    var ua = navigator.userAgent;
    var system = {
        win: false,
        mac: false,
        x11: false,
        //mobile
        iphone: false,
        ipad: false,
        ios: false,
        android: false,
        winMobile: false
    };
    var p = navigator.platform;
    system.win = p.indexOf('Win') === 0;
    system.mac = p.indexOf('Mac') === 0;
    system.x11 = (p === 'x11') || (p.indexOf('Linux') === 0);

    system.iphone = ua.indexOf('iPhone') > -1;
    system.ipad = ua.indexOf('iPad') > -1;
    system.android = ua.indexOf('Android') > -1;

    var viewWidth = window.innerWidth || document.documentElement.clientWidth;
    if (!(system.win || system.mac || system.x11)) {
        gameMap.width = viewWidth * 0.9;
        gameMap.height = viewWidth * 0.9;
    }

    var snakeId = [[${snakeId}]];
    var ctx = gameMap.getContext("2d");

    var websocket = null;

    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://" + location.host + "/snake");
    } else {
        alert('您的浏览器不支持WebSocket，无法开始游戏')
    }

    websocket.onerror = function () {
        alert("连接发生异常");
    };

    websocket.onopen = function (event) {
        console.log("连接成功");
    };

    websocket.onclose = function () {
        console.log("连接关闭");
    };

    window.onbeforeunload = function () {
        websocket.close();
    };

    var unitWidth = gameMap.width / 100;
    var unitHeight = gameMap.height / 100;
    websocket.onmessage = function (message) {
        ctx.clearRect(0, 0, gameMap.width, gameMap.height);
        var mapStatus = JSON.parse(message.data);
        for (var i = 0; i < mapStatus.length; i++) {
            for (var j = 0; j < mapStatus[i].length; j++) {
                if (mapStatus[i][j] === 2) {
                    ctx.fillStyle = "#FF0000";
                    ctx.fillRect(j * unitHeight, i * unitWidth, unitHeight, unitWidth);
                } else if (mapStatus[i][j] === 1) {
                    ctx.fillStyle = "#0000FF";
                    ctx.fillRect(j * unitHeight, i * unitWidth, unitHeight, unitWidth);
                }
            }
        }
    };

    gameMap.addEventListener('keydown', doKeyDown, true);
    gameMap.focus();

    function doKeyDown(e) {
        var keyID = e.keyCode ? e.keyCode : e.which;
        doDirection(keyID);
    }

    function doDirection(keyCode) {
        var message = {"snakeId": snakeId, "action": keyCode};
        websocket.send(JSON.stringify(message));
    }
</script>
</html>